<template>
    <div>
        <PageContainer title="用户管理">
            <template v-slot:extra>
                <el-input v-model="params.username" style="width: 300px" size="large" placeholder="请输入用户名" />
                <el-button size="large" style="margin-left: 10px;" type="primary" @click="getUserList">查询</el-button>
                <el-button size="large" style="margin-left: 10px;" type="primary" @click="onset">重置</el-button>
            </template>
            <div class="mod-web__user">
                <el-table :data="usersList">
                    <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                    <el-table-column prop="url" label="头像" header-align="center" align="center">
                        <template #default="{ row }">
                            <el-avatar shape="square" :src="row.url"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column prop="username" label="用户名" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="nickname" label="昵称" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="gender" label="性别" header-align="center" align="center">
                        <template #default="{ row }">
                            {{ row.gender === 0 ? '女' : '男' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="note" label="个性签名" header-align="center" align="center">
                        <template #default="{ row }">
                            <el-tooltip :content="row.note" effect="light">
                                <el-button link>{{ row.note }}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createDate" label="创建时间" header-align="center" align="center">
                        <template #default="{ row }">
                            {{ formatTime(row.createDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                        <template #default="{ row }">
                            <el-button type="primary" link @click="onEditUser(row)">编辑</el-button>
                            <el-button type="danger" link @click="deleteUserById(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 弹窗, 新增 / 修改 -->
                <updateUser ref="userEditRef"></updateUser>
            </div>
            <div class="page">
                <el-pagination :page-sizes="[10, 15, 20]" layout="total, sizes, prev, pager, next,jumper" :total="total"
                    v-model:current-page="params.pageNum" v-model:page-size="params.pageSize"
                    @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle" />
            </div>
        </PageContainer>
    </div>

</template>

<script setup lang="ts">
import PageContainer from '@/components/PageContainer.vue';
import { ref,provide } from 'vue';
import { formatTime } from '@/utils/format';
import { userList, getUserByUn, deleteUser } from '@/service/api'
import updateUser from './components/updateUser.vue';
import { ElMessage } from 'element-plus';

const total = ref(1)
const params = ref({
    pageNum: 1,
    pageSize: 10,
    username: ''
})

const userEditRef = ref()
const usersList = ref<any>([])
//分页获得用户列表
const getUserList = async () => {
    await userList(params.value).then(res => {
        usersList.value = res.data.data.list
        total.value = res.data.data.total
    })

}
getUserList()
provide('getUserList',getUserList)

//查询用户信息
// const selectUserByUn = async () => {
//   if (params.value.username !== '') {
//     const res = await getUserByUn({username:params.value.username});
//     const users = res.data.data;
//     if (users) {
//       usersList.value = [users];
//       params.value.pageNum = 1;
//       ElMessage.success('查询成功！！！')
//     } else {
//       usersList.value = [];
//     }
//   } else {
//     ElMessage.error('请输入用户名！！！');
//   }
// };

//编辑用户信息
const onEditUser = (row: any) => {
    userEditRef.value.open(row)
}
const onset = () => {
    params.value.pageNum = 1 //重置页面
    params.value.username = ''
    getUserList()
}

//删除用户信息
const deleteUserById = async (row: any) => {
    await ElMessageBox.confirm('是否删除角色信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
    await deleteUser({ id: row.id })
    ElMessage.success('删除成功')
    getUserList()
}

//分页，每页条数
const pageSizeChangeHandle = (val: number) => {
    params.value.pageSize = val;
    params.value.pageNum = 1;
    getUserList()
}
//分页，当前页
const pageCurrentChangeHandle = (val: number) => {
    params.value.pageNum = val;
    getUserList()
}
</script>


<style scoped lang="less">
.page {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
  top: 90%
}
</style>